<template>
  <div class="c-flex-row c-ph24" v-if="!isFromM7">
    <!--<div class="c-ww140 c-maxh140 c-text-hidden c-p c-bd1">-->
    <div class="c-ww180 c-hh120 c-text-hidden c-p c-br16">
      <CoverImg coverSizeClass="c-w100 c-h c-text-hidden c-br16" imgClass="c-br16" :coverUrl="$addXossFilter(item.avatar, require('@/assets/defult270.png'))" />
      <vip-status :item="item"></vip-status>
    </div>
    <div class="c-w0 c-flex-grow1 c-flex-column c-justify-sb c-pl20">
      <div :class="hasGetCer?'c-pt2':''" class="c-fs24 c-text-ellipsis2">{{item.name}}</div>
      <div v-if="hasGetCer" @click="showNow" class="c-fs20 c-fc-draw"><span class="icon iconfont c-fs20 c-mr8">&#xea1b;</span>结课证书</div>
      <div v-if="isMyExam" :class="hasGetCer?'c-pb2':''" class="c-flex-row c-aligni-center">
        <div class="theme-fc" v-if="item.isSaleAlone!=1&&item.isSaleTogether==1">
          <span class="c-fs22">关联售卖</span>
        </div>
        <div v-else class="theme-fc">
          <span v-if="item.payType==2" class="c-fs24">{{'￥' | iosPriceFilter}}</span>
          <span :class="item.payType==2 ? 'c-fs26':'c-fs24'">{{item.payType | priceValueFilter(item.price, 11, item.optimal, 'index')}}</span>
        </div>
        <span v-if="item.payType==2" class="c-fc-gray c-fs24 c-lh">&nbsp;/&nbsp;</span>
        <span class="c-flex-grow1">
          <span class="c-fs20 c-lh c-w0 c-fc-gray">考试{{item.hasPaper}}套</span>
          <span v-if="isMyExam" class="c-fc-gray c-fs20">&nbsp;|&nbsp;</span>
          <span v-if="isMyExam" class="c-fs20 c-fc-smblue">已测试{{mySchedule}}</span>
        </span>
        <span class="c-fs20 c-fc-gray c-lh" v-if="!item.showTime">{{item.payType==2 && !$isWxAppIos() ? '已售':'已测'}}{{item.subscribers}}</span>
        <span class="c-fs20 c-fc-gray c-lh" v-if="item.showTime">{{item.time}}</span>
      </div>
      <div v-else :class="hasGetCer?'c-pb2':''" class="c-flex-row c-aligni-center">
        <div class="theme-fc c-mt5" v-if="item.isSaleAlone!=1&&item.isSaleTogether==1">
          <span class="c-fs22">关联售卖</span>
        </div>
        <div v-else class="c-fc-xmlred c-fw600 c-mt5">
          <span v-if="item.payType==2" class="c-fs20">{{'￥' | iosPriceFilter}}</span>
          <span :class="item.payType==2 ? 'c-fs26':'c-fs22'">{{item.payType | priceValueFilter(item.price, 11, item.optimal, 'index')}}</span>
        </div>
        <span class="c-flex-grow1 c-textAlign-r">
          <span class="c-fs20 c-w0 c-fc-gray">考试{{item.hasPaper}}套</span>
          <span class="c-fc-gray c-fs20">&nbsp;|&nbsp;</span>
          <span class="c-fs20 c-fc-gray" v-if="!item.showTime">{{item.payType==2 && !$isWxAppIos() ? '已售':'已测'}}{{item.subscribers}}</span>
          <span class="c-fs20 c-fc-gray" v-if="item.showTime">{{item.time}}</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
import defultImg from '../../assets/examination_defult.png'
import vipStatus from '@/components/templates/common/vipStatus.vue'
import CoverImg from '@/components/templates/common/coverImg.vue';
export default {
  name: "ExaminationItem",
  components: {
    vipStatus,
    CoverImg
  },
  //props: ["item"],
  props: {
    item: {
      type: Object,
      default: null,
    },
    isFromM7: {
      type: Boolean,
      default: false
    },
    itemType: {
      type: Number,
      default: 1, //1一行一列，2一行两列，3一行三列
    },
    itemList: {
      type: Array,
      default: () => []
    },
    showCount: {
      type: Number,
      default: 1
    },
    hasGetCer: {
      type: Boolean,
      default: false
    },
    isMyExam: {
      type: Boolean,
      default: false
    },
    mySchedule: {
      type: String,
      default: ''
    },
    showMore: {
      type: Number,
      default: 0,
    },
    visible:{
      type: Object,
      default: () => {
        return {
          priceVisible:true, // 价格、商品价格
          originalPriceVisible:true, // 划线价格
          dataVisible:true, // 商品数据、数据字段、数据
          statusVisible:true, // 状态
          forecastVisible:true, // 预告时间
          qrVisible:true, // 预告二维码
          vipVisible:true, // vip角标
        }
      },
    }
  },
  data() {
    return {
      noImg: defultImg,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      themeName: localStorage.getItem('themeName') ? localStorage.getItem('themeName') : 'mb5'
    };
  },

  methods: {
    clickMore() {
      this.$emit('clickMore');
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickExaminationItem(examinationNo) {
      let toPath = `/homePage/examination/examinationDetail?ExaminationNo=${examinationNo}`;
      this.iosAppRouteChange(toPath);
    },
    setDefultImg(e) {
      this.item.avatar = defultImg;
    },
    showNow() {
      this.$emit('showNow');
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.c-fc-draw {
  color: #fa875d;
}
.c-pb2 {
  padding-bottom: 0.05rem;
}
.c-bg-pb {
  background: #ecf4fe;
}
.c-bg-db {
  background: #4294f7;
}
</style>
